<template>
	<view class="page">
		<view class="title">
			2.6.常用的表单组件button和input
		</view>
		<view class="">
			官网链接API
			<uni-link href="https://uniapp.dcloud.net.cn/component/navigator.html" text="navigator" class="mr-12"
				color="#007BFF"></uni-link>
			<uni-link href="https://uniapp.dcloud.net.cn/component/input.html" text="input" color="#007BFF"></uni-link>
		</view>
		<view class="p">
			button 按钮日常使用主要有type和size两项，控制背景颜色和大小。以下则是小程序里面所用到的主要功能。
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="p">
			<button open-type="getUserInfo" @getuserinfo="getUserInfo" size="mini" type="primary">获取用户信息</button>
		</view>
		<!-- 展示用户信息 -->
		<view v-if="userInfo">
			<uni-list :border="true">
				<!-- 显示圆形头像 -->
				<uni-list-chat :avatar-circle="true" :title="userInfo.nickName" :avatar="userInfo.avatarUrl"
					note="您收到一条新的消息" time="2020-02-02 20:20"></uni-list-chat>
			</uni-list>
		</view>
		<!-- #endif -->
		<view class="p">
			input单行输入框
		</view>
		<view class="p">
			首先是type类型，可以为text，number,tel 类型不同输入弹出的键盘类型也会不同。placeholder 可以设置输入框的提示文字。
		</view>
		<view class="p">
			confirm-type设置键盘右下角按钮的文字。<text class="red">仅在 type="text" 时生效</text>。可以选择的有效值为 send(发送) search(搜索) next(下一步)
			go(前往) done(完成)。用来提升用户体验
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 使用 ref 创建响应式数据来存储用户信息
	const userInfo = ref(null);

	const getUserInfo = (e) => {
		if (e.detail.errMsg === 'getUserInfo:ok') {
			// 用户同意授权，将用户信息存储到 userInfo 中
			userInfo.value = e.detail.userInfo;
		} else {
			console.log('用户拒绝授权');
		}
	};
</script>

<style lang="scss" scoped>

</style>